<template>
    <v-box :title="'首次激活（恢复出厂设置）'" style="overflow:auto">
        <v-center  style="width:100%" >
            <template #head>
                <view class="tab_main"  v-show="show">
                    <view class="tab">
                        <view class="title">
                            <span style="background: #197C6C;">1</span>
                            设备信息
                        </view>
                        <view class="inp">
                            <ul>
                                <li><label for=""><i>*</i>用户姓名</label><input type="text" ></li>
                                <li><label for="">工号</label><input type="text" ></li>
                                <li><label for=""><i>*</i>所属单位</label><input type="text"></li>
                                <li><label for="">所属部门</label><input type="text"></li>
                                <li><label for="">电话</label><input type="text"></li>
                                <li><label for="">备注</label><input type="text"></li>
                                <li><label for=""></label><button @click="change">下一步</button></li>
                            </ul>
                        </view>
                    </view>
                </view>
                <view class="tab_main"  v-show="!show">
                    <view class="tab">
                        <view class="title"   style="border-left: 5px solid #00A2E9;">
                            <span style="background: #00A2E9;">2</span>
                            入网口令
                        </view>
                        <view class="inp">
                            <ul>
                                <li><label for="">入网口令</label><input type="text" ></li>
                                <li><label for="">中心服务器的IP地址</label><input type="text"></li>
                                <li><label for="">端口</label><input placeholder="eg: 8080" type="text"></li>
                                <li><label for=""></label><button @click="change">上一步</button><button style="margin-left:60px">完成</button></li>
                            </ul>
                        </view>
                    </view>
                </view>
            </template>
            <template #center>
                <view>
                  
                </view>
            </template>
            <template #end>
                
            </template>
        </v-center>
    </v-box>
</template>
<script>
import VBox from "@/components/scraw/VBox.vue";
import VCenter from "@/components/scraw/VCenter.vue";
// import FormImage from "@/components/form/FormImage.vue";
export default {
  components: {
    VBox,
    VCenter,
    // FormImage
  },
  data() {
    return {
      show: true,
    };
  },
  methods: {
    change: function() {
      this.show = !this.show;
    },
  },
  setup() {},
};
</script>

<style scoped>

.tab_main{
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    /* height:100px; */
    width:95%; 
    /* background:yellow; */
    border-left: 1px solid #D2D2D2;
}
.tab_main .tab{
    width: 95%;
    /* height: 50px; */
    /* background:chocolate; */
}
.tab_main .tab .title{
    position: relative;
    width: 100%;
    height: 40px;
    background: #FAFAFA;
    border: 1px solid #EEEEEE;
    border-left: 5px solid #197C6C;
    padding-left: 40px;

    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #1F1F1F;
    line-height: 40px;
}
.tab_main .tab .title span{
    position: absolute;
    top:-1px;
    left: -8%;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    color: #fff;
    text-align: center;
    line-height: 38px;
}
.tab_main .tab .inp{
    width: 100%px;
    border: 1px solid #EEEEEE;
}

.tab_main .tab .inp li{
    display: flex;
    align-items: center;
    margin: 26px 42px;
}

.tab_main .tab .inp li input{
    height: 34px;
    width: 604px;
    padding-left: 10px;
    background: #FFFFFF;
    border: 1px solid #EEEEEE;
    border-radius: 4px;
}
.tab_main .tab .inp li label{
    width: 100px;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 400;
}
.tab_main .tab .inp li label i{
    font-style: normal;
    color: red;
}

.tab_main .tab .inp li button{
    width: 200px;
    height: 42px;
    border-radius: 4px;
    background: #197C6C;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #FFFFFF;
    cursor: pointer;
}
button,
input {
    /* "\5B8B\4F53" 就是宋体的意思 这样浏览器兼容性比较好 */
    font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
    /* 默认有灰色边框我们需要手动去掉 */
    border: 0; 
    outline: none;
}

</style>